<template>
	<view class="example-container">
		<u-popup v-model="popShowFlag" mode="bottom" border-radius="14" :duration="300"
				 :height="(innerWindowHeight)+'px'" :mask-close-able="false">
				 <view style="padding-top:10%;background-color: #303133;height: 100%;">
					<view class="u-p-30 u-flex u-row-between u-col-center u-border-bottom">
						<view  @click="closePopUp()" style="width: 30%;">
							<u-icon name="close" size="34" color="#ffffff"></u-icon>
						</view> 
						<view style="font-size: 34rpx;font-weight: bold;color: #ffffff;text-align: center;">情景对话</view>
						<view  style="width: 30%;text-align: right;color: #2979ff;" @click="saveLocal()"> 
							<text>保存草稿</text>
						</view>
					</view>
					
					<view class="u-p-20">
						<u-collapse :item-style="{background:'#ffffff',padding:'20rpx 10rpx',marginTop: '20rpx',borderRadius:'10rpx'}">
							<u-collapse-item>
								<view class="u-font-36 u-p-l-20" slot="title">
									<view>
										<text>赋予身份</text>
										<text class="u-tips-color u-font-30">(500字以内)</text>
									</view>
									<view  class="u-tips-color u-font-28 u-m-t-20">
										<text>给AI赋予一个角色，可以是某个领域的专家，如数学老师，外科医生等。。。</text>
									</view>
								</view>
								<view class="u-p-20">
									<u-input type="textarea" v-model="formData.roleDesc"  :height="300"  :maxlength="500"	
										 border :placeholder="roleRemark" ></u-input>
								</view>
							</u-collapse-item>
							<u-collapse-item>
								<view class="u-font-36 u-p-l-20" slot="title">
									<view>
										<text>交代背景</text>
										<text class="u-tips-color u-font-30">(500字以内)</text>
									</view>
									<view  class="u-tips-color u-font-28 u-m-t-20">
										<text>给你的提问设置情景铺垫，说明时间，地点以及你的目的，期望。。。</text>
									</view>
								</view>
								<view class="u-p-20">
									<u-input type="textarea" v-model="formData.bgDesc" :height="300"	  border :maxlength="500"
										:placeholder="bgRemark" ></u-input>
								</view>
							</u-collapse-item>
							<u-collapse-item>
								<view class="u-font-36 u-p-l-20"  slot="title">
									<view>
										<text>给出需求</text>
										<text class="u-tips-color u-font-30">(1000字以内)</text>
									</view>
									<view  class="u-tips-color u-font-28 u-m-t-20">
										<text>对于自己期望值加以具体的描述，补充关键词</text>
									</view>
								</view>
								<view class="u-p-20">
									<u-input type="textarea" v-model="formData.needDesc" :height="300" border  :maxlength="1000"
										:placeholder="quesRemark"></u-input>
								</view>
							</u-collapse-item>
							<u-collapse-item>
								<view class="u-font-36 u-p-l-20" slot="title">
									<view>
										<text>意见补充</text>
										<text class="u-tips-color u-font-30">(500字以内)</text>
									</view>
									<view  class="u-tips-color u-font-28 u-m-t-20">
										<text>一些额外的补充说明</text>
									</view>
								</view>
								<view class="u-p-20">
									<u-input type="textarea" v-model="formData.adviceDesc" :height="300" border :maxlength="500"
										:placeholder="issueRemark"></u-input>
								</view>
							</u-collapse-item>
						 </u-collapse>
					</view>
					
					<view class="u-p-20" style="position: absolute;bottom: 30px;width: 100%;">
						<u-button type="success" @click="toQuestion" :disabled="btnDisabled()">立即提问</u-button>
					</view>
				</view>	
		</u-popup>
	</view>
</template>

<script>
	export default {
		props:{
			showFlag:{
				type: Boolean,
				default:false,
			}
		},
		data() {
			return {
				popShowFlag:false,
				innerWindowHeight:0,
				scrollViewHeight:0,
				bgRemark:'我要在5月1号去张家界旅游，为期3天，住在张家界火车站附近',
				roleRemark:'你作为一名资深的导游',
				quesRemark:'帮我制定一份为期3天的旅游计划，包括详细的出现时间安排，路线，以及用餐安排',
				issueRemark:'同行中有一个3岁小孩，和以为60岁的老人，我希望时间宽松，费用合理，不用太劳累',
				formData:{
					bgDesc:'',
					roleDesc:'',
					needDesc:'',
					adviceDesc:'',
				}
			};
		},
		mounted:function(option){
			let that=this;
			let pageHeight= this.$u.sys().windowHeight;
			this.innerWindowHeight =pageHeight;
			this.scrollViewHeight =pageHeight * 0.8;
			this.popShowFlag=this.showFlag;
			let key="proData_"+that.vuex_userInfo.id;
			let localData= uni.getStorageSync(key);
			if(localData&&localData.length>0){
				that.formData=JSON.parse(localData);
			}
		},

		methods:{
			btnDisabled:function(){
				let that=this;
				if(that.formData.roleDesc.length<1||that.formData.needDesc.length<1){
					return true;
				}else{
					return false;
				}
			},
			saveLocal:function(){
				let that=this;
				let localData=that.formData;
				let proQuestionStr= JSON.stringify(localData);
				let key="proData_"+that.vuex_userInfo.id;
				uni.setStorageSync(key,proQuestionStr);
				that.globalUtil.utilAlert("保存成功");
			},
			toQuestion:function(){
				let that=this;
				let str=that.formData.roleDesc+"\n";
				if(that.formData.bgDesc.length>0){
					str=str+that.formData.bgDesc+"\n";
				}
				str=str+that.formData.needDesc+"\n";
				if(that.formData.adviceDesc.length>0){
					str=str+that.formData.adviceDesc+"\n";
				}
				that.popShowFlag=false;
				//console.log("====最终====",str);
				that.$emit("proToAnswer",str);
			},
			closePopUp:function(){
				let that=this;
				console.log("关闭")
				this.popShowFlag=false;
				setTimeout(function(){
					that.$emit("closeProPop",false);
				},200)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.example-container{
		color: #606266;
		.item-box{
			background-color: #ffffff;
			border-radius: 10rpx;
			color: #000000;
		}
	}
</style>

